<template>
  <div class="login_container">
    <el-form :model="ruleForm" :rules="rules"
              status-icon
              ref="ruleForm">
      <el-tabs v-model="activeName" @tab-click="handleClick" :stretch="true" type="border-card">

        <el-tab-pane label="账号登录" name="first">

          <el-form-item prop="username">
            <el-input
                placeholder="请输入用户名/手机号"
                v-model="ruleForm.username"
                clearable>
            </el-input>
          </el-form-item>

          <el-form-item style="margin-bottom: 2px" prop="password">
            <el-input
                placeholder="请输入密码"
                v-model="ruleForm.password"
                show-password
                clearable>
            </el-input>
          </el-form-item>

          <el-form-item style="margin-bottom: 0;margin-left: 300px"><el-link href="/forgetPasswordView">？忘记密码</el-link></el-form-item>



          <el-form-item style="margin-bottom: 0"><el-button @click = "loginClick">登录</el-button></el-form-item>
          <el-form-item style="margin-bottom: 0"><el-link href="/register">注册</el-link></el-form-item>

        </el-tab-pane>

        <el-tab-pane label="验证码登录" name="second">
          <el-form-item prop="phoneNumber">
            <el-input
                placeholder="请输入手机号"
                v-model="ruleForm.phoneNumber"
                clearable>
            </el-input>
          </el-form-item>

          <el-form-item prop="verification">
            <el-input
                placeholder="请输入验证码"
                v-model="ruleForm.verification"
                clearable>
              <el-button slot="append" @click = "verifyCodeClick">获取验证码</el-button>
            </el-input>
          </el-form-item>
          <el-form-item style="margin-bottom: 0"><el-button @click = "loginClickByPhone">登录</el-button></el-form-item>
          <el-form-item style="margin-bottom: 0"><el-link>注册</el-link></el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass3 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入手机号'));
      } else if (value.length !==11 || !(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)) {
        callback(new Error('请输入正确手机号'));
      } else {
        callback();
      }
    };
    var validatePass4= (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入用户名/手机号'));
      } else if ((/^[0-9]*$/).test(value)) {
        if(value.length !== 11 || !(/^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/).test(value)){
          callback(new Error('请输入正确手机号'));
        }else {
          this.ruleForm.phoneNumber = this.ruleForm.username
        }

      } else {
        callback();
      }
    };
    return {
      activeName: 'first',
      ruleForm:{
        username: '',
        password: '',
        phoneNumber:'',
        verification: ''
      },
      rules: {
        username:[{require: true ,validator: validatePass4, trigger:'blur'}],
        password:[{require: true , trigger:'blur'}],
        phoneNumber:[{require: true , validator: validatePass3, trigger:'blur'}],
        verification:[{require: true , trigger:'blur'}]
      },
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

    loginClick(){
      this.$http({
        url: "http://47.104.100.60:82/loginCommonUser",
        method: "post",
        data: {
          username: this.ruleForm.username,
          iphone:this.ruleForm.phoneNumber,
          password: this.ruleForm.password
        }
      }).then(res =>{
        //  登录成功跳转到questionList页面，将账号id传输过去
        if(res.data.id == -1){
          alert("登录失败")
        }else{
          sessionStorage.setItem("userId", res.data.id)
          this.$router.push({
            path: decodeURIComponent(this.$route.query.redirect || '/questionnaireList')
          })
        }

      }).catch(err =>{
        //根据状态码警告
        console.log(err)
      })
    },
    loginClickByPhone(){
      this.$http({
        url:'http://47.104.100.60:82/confirmCommonUserCode',
        method:'post',
        data:{
          iphone:this.ruleForm.phoneNumber,
          verifyCode:this.ruleForm.verification
        }
      }).then(res => {
      //  登录成功跳转到questionList页面，将账号id传输过去
      //  登录失败弹出警告
        if(res.data == null){
          alert("登录失败")
        }else{
          this.$router.push({
            path:'/questionnaireList',
            query:{
              userId:res.data.id
            }
          })
        }
      }).catch(err=>{
        console.log(err)
      })

    },
    // getByID(){
    //   this.$http({
    //     url:"/getCommonUserByID",
    //     method: "post",
    //     data:{
    //       id:1
    //     }
    //   }).then(res=>{
    //     console.log(res)
    //   }).catch()
    // },

  //  axios模板
  //   this.$http({
  //
  //   }).then(res => {
  //
  //   }).catch(err=>{}
  //
  //   )

  //  获取验证码
    verifyCodeClick(){
      this.$http({
        url:"http://47.104.100.60:82/sendVerifyCode",
        method:"post",
        data:{
          iphone:this.ruleForm.phoneNumber
        }
      }).then(res => {
        //  alert展示验证码已经发送
        if (res.data[0].message == 'send success'){
          alert("发送成功")
        }else{
          alert("手机号不正确")
        }
      }).catch(err=>{
        alert("发送失败")
        console.log(err)
      })
    },
  }
};
</script>

<style>
.login_container{
  margin-top:180px;
  width: 30%;
  margin-left: 35%;
}

</style>